(function(window){
	/**
	 * [waterfall description]
	 * @param  {[type]} dom     布局根元素的DOM对象
	 * @param  {[type]} space   图片间距 
	 * @param  {[type]} columns 列数
	 * 
	 */
	var waterfall = function(dom, space, columns){
		this.space = space || 8;
		this.columns = columns || 4;
		this.root = dom;
		this.root.style.position = 'relative';
		this.init();
	}
	waterfall.prototype = {
		constructor: waterfall,
		init: function(){
			var self = this;
			this.setStyle();
			this.root.addEventListener('click',function(e){
				self.amplification.call(self,e);
			},false);
			this.addPic();
			window.onresize = function(){
				location.replace(location.href);
			};
		},
		setStyle: function(){
			this.width = this.root.clientWidth / this.columns;
			this.minHeight = [];
			this.count = 0;
			for(var i = 0; i < this.columns; i++){
				this.getMinHeight(i);
				this.root.children[i].style.left = i*this.width + 'px';
				this.root.children[i].style.top = 0;
				this.minHeight.push(this.root.children[i].clientHeight);
			}
			this.initPic();
		},
		initPic: function(){
			for(var i = this.count; i < this.root.children.length; i++){
				this.getMinHeight(i);
				var temp = Math.min.apply(null,this.minHeight);
				for(var j in this.minHeight){
					if(temp == this.minHeight[j])
						break;
				}
				this.root.children[i].style.left = j * this.width + 'px';
				this.root.children[i].style.top = temp + 'px';
				this.minHeight[j] += this.root.children[i].clientHeight;
			}
		},
		getMinHeight:function(i){
			this.root.children[i].style.position = 'absolute';
			this.root.children[i].style.border = '1px solid #ccc';
			this.root.children[i].style.width = this.width + 'px';
			this.root.children[i].style.background = '#333';
			this.root.children[i].style.padding = this.space + 'px';
			this.root.children[i].style.borderRadius = '5px';
			this.root.children[i].children[0].style.border = '1px solid rgba(255,0,0,0.5)';
			this.root.children[i].children[0].style.width = '100%';
			this.root.children[i].children[0].style.borderRadius = '5px';
			this.count = i+1;
		},
		amplification: function(e){
			var e = e || window.event;
			if(e.target.parentNode.parentNode === this.root){
				this.mask = document.createElement('div');
				this.mask.style.position = 'fixed';
				this.mask.style.top = 0;
				this.mask.style.left = 0;
				this.mask.style.right = 0;
				this.mask.style.bottom = 0;
				this.mask.style.background = 'rgba(0,0,0,0.8)';
				document.body.appendChild(this.mask);
				this.nowPic = document.createElement('div');
				this.nowPic.innerHTML = '<img src="'+ e.target.src+'">';
				this.nowPic.style.position = 'fixed';
				var img = new Image();
				img.src = e.target.src;
				if(img.width > document.documentElement.clientWidth ){
					img.height = document.documentElement.clientWidth/img.width*img.height;
					img.width = document.documentElement.clientWidth;
				}
				if(img.height > document.documentElement.clientHeight){
					img.width = document.documentElement.clientHeight/img.height*img.width;
					img.height = document.documentElement.clientHeight;
				}
				this.nowPic.children[0].style.width = '100%';
				this.nowPic.style.width = img.width + 'px';
				this.nowPic.style.height = img.height + 'px';
				this.nowPic.style.top = (document.documentElement.clientHeight - img.height)/2 +'px';
				this.nowPic.style.left = (document.documentElement.clientWidth - img.width)/2 + 'px';
				this.nowPic.style.zIndex = 1000;
				document.body.appendChild(this.nowPic);
				this.show();
				this.hide();
			}
		},
		show: function(a){
			var self = this;
			if(a === undefined){
				var a = 0;
			}
			self.mask.style.opacity = a;
			self.nowPic.style.transform = 'scale('+a+','+a+')';
			a += 0.03;
			self.id = requestAnimationFrame(self.show.bind(self,a));
			if(a > 1){
				cancelAnimationFrame(self.id);
			}
		},
		hide: function(){

			this.mask.addEventListener('click',this._hide.bind(this),false);
		},
		_hide: function(e,a){
			var self = this;
			if(a === undefined){
				var a = 1;
			}
			self.mask.style.opacity = a;
			self.nowPic.style.transform = 'scale('+a+','+a+')';
			a -= 0.03;
			self.id = requestAnimationFrame(self._hide.bind(self,e,a));
			if(a < 0){
				cancelAnimationFrame(self.id);
				document.body.removeChild(self.mask);
				document.body.removeChild(self.nowPic);
			}
		},
		addPic: function(){//模拟ajax动态加载图片
			function scroll(){
				var top = document.body.scrollTop || document.documentElement.scrollTop;
				
				if(top + document.documentElement.clientHeight > Math.min.apply(null,this.minHeight)){
					// alert();
					// var request = new XMLHttpRequest();
					// request.open('POST', 'php/index.php', true);
					// request.send('来点图片');
					// request.onreadystatechange = function(){
					// 	if(request.readyState ===4 && request.status === 200){

					// 	}
						
					// };
					for(var i = 7; i < 14; i++){
						this.root.innerHTML += '<div><img src="img/'+i+'.jpg" alt=""></div>';
					}
					this.initPic();
				}
			}
			document.addEventListener('scroll',scroll.bind(this),false);
		},
	};
	window.waterfall = function(dom, space, columns){
		return new waterfall(dom, space, columns);
	};
})(window);

waterfall(document.querySelector('.wrap'));

